
import React from 'react';
import { Heart, Activity, Apple, Sun, Moon, Zap, Sparkles, Flower } from 'lucide-react';
import { cn } from '@/lib/utils';
import { useInView } from '@/utils/animation';
import { useIsMobile } from '@/hooks/use-mobile';

interface HealthIllustrationProps {
  className?: string;
  variant?: 'default' | 'compact';
}

const HealthIllustration: React.FC<HealthIllustrationProps> = ({ 
  className,
  variant = 'default'
}) => {
  const { ref, isInView } = useInView(0.1);
  const isMobile = useIsMobile();
  
  // Use compact settings for the compact variant
  const isCompact = variant === 'compact';
  
  // Adjust sizes based on device and variant - making them more flexible with percentages
  const centerCircleSize = isCompact ? 40 : (isMobile ? 60 : 80);
  const innerRingSize = isCompact ? 70 : (isMobile ? 90 : 110);
  const outerRingSize = isCompact ? 90 : (isMobile ? 110 : 140);
  const iconSize = isCompact ? 16 : (isMobile ? 18 : 22);
  
  return (
    <div 
      ref={ref} 
      className={cn(
        "relative w-full aspect-square", 
        className
      )}
    >
      {/* Main illustration container */}
      <div 
        className={cn(
          "absolute inset-0 transition-all duration-700 ease-in-out delay-100",
          isInView ? "opacity-100 scale-100" : "opacity-0 scale-95"
        )}
      >
        {/* Central circle with gradient */}
        <div 
          className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-gradient-to-br from-primary/30 to-primary/70 backdrop-blur-sm shadow-md"
          style={{
            width: `${centerCircleSize}%`,
            height: `${centerCircleSize}%`,
            background: "linear-gradient(135deg, rgba(168,85,247,0.4) 0%, rgba(217,70,239,0.6) 100%)",
          }}
        >
          {/* Heart in center */}
          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-white animate-pulse-soft">
            <Heart size={isCompact ? 28 : (isMobile ? 32 : 40)} fill="white" />
          </div>
        </div>
        
        {/* Decorative rings */}
        <div 
          className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-dashed border-primary/30 animate-spin-slow"
          style={{
            width: `${innerRingSize}%`,
            height: `${innerRingSize}%`,
          }}
        ></div>
        <div 
          className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full border border-primary/20"
          style={{
            width: `${outerRingSize}%`,
            height: `${outerRingSize}%`,
          }}
        ></div>
        
        {/* Orbiting elements */}
        <div 
          className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 animate-spin-reverse-slow"
          style={{
            width: `${innerRingSize}%`,
            height: `${innerRingSize}%`,
          }}
        >
          <div className="absolute top-0 left-1/2 -translate-x-1/2 bg-dopamine-yellow/20 p-1.5 rounded-full backdrop-blur-sm shadow-sm">
            <Zap className="text-dopamine-yellow" size={iconSize} />
          </div>
        </div>
        
        <div 
          className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 animate-spin-slow"
          style={{
            width: `${outerRingSize}%`,
            height: `${outerRingSize}%`,
          }}
        >
          <div className="absolute bottom-0 left-1/2 -translate-x-1/2 bg-dopamine-coral/20 p-1.5 rounded-full backdrop-blur-sm shadow-sm">
            <Activity className="text-dopamine-coral" size={iconSize} />
          </div>
          
          <div className="absolute right-0 top-1/2 -translate-y-1/2 bg-dopamine-purple/20 p-1.5 rounded-full backdrop-blur-sm shadow-sm">
            <Sparkles className="text-dopamine-purple" size={iconSize} />
          </div>
          
          <div className="absolute left-0 top-1/2 -translate-y-1/2 bg-dopamine-teal/20 p-1.5 rounded-full backdrop-blur-sm shadow-sm">
            <Flower className="text-dopamine-teal" size={iconSize} />
          </div>
        </div>
      </div>
      
      {/* Floating elements around - with proper positioning that scales with container */}
      <div className="absolute inset-0">
        {/* Activity icon */}
        <div 
          className={cn(
            "absolute top-[5%] right-[10%] text-dopamine-purple transition-all duration-700 ease-in-out delay-300 animate-float",
            isInView ? "opacity-100 translate-x-0" : "opacity-0 translate-x-12"
          )}
        >
          <div className="bg-dopamine-purple/10 p-1.5 rounded-full backdrop-blur-sm shadow-sm">
            <Activity size={iconSize} />
          </div>
        </div>
        
        {/* Apple icon */}
        <div 
          className={cn(
            "absolute bottom-[35%] left-[5%] text-dopamine-coral transition-all duration-700 ease-in-out delay-200 animate-float",
            isInView ? "opacity-100 translate-x-0" : "opacity-0 -translate-x-12"
          )}
        >
          <div className="bg-dopamine-coral/10 p-1.5 rounded-full backdrop-blur-sm shadow-sm">
            <Apple size={iconSize} />
          </div>
        </div>
        
        {/* Sun icon */}
        <div 
          className={cn(
            "absolute top-[60%] right-[8%] text-dopamine-yellow transition-all duration-700 ease-in-out delay-500 animate-float",
            isInView ? "opacity-100 translate-y-0" : "opacity-0 translate-y-12"
          )}
        >
          <div className="bg-dopamine-yellow/10 p-1.5 rounded-full backdrop-blur-sm shadow-sm">
            <Sun size={iconSize} />
          </div>
        </div>
        
        {/* Moon icon */}
        <div 
          className={cn(
            "absolute bottom-[15%] right-[25%] text-dopamine-blue transition-all duration-700 ease-in-out delay-400 animate-float",
            isInView ? "opacity-100 translate-y-0" : "opacity-0 translate-y-12"
          )}
        >
          <div className="bg-dopamine-blue/10 p-1.5 rounded-full backdrop-blur-sm shadow-sm">
            <Moon size={iconSize} />
          </div>
        </div>
      </div>
    </div>
  );
};

export default HealthIllustration;
